<template>
  <div style="padding: 32px;background-color: #f8f8f8;position: relative;">
    <el-row :gutter="10">
      <!-- <div  v-for="(item, index) in countNumList"> 
        <el-col :span="6">
          <el-card shadow="never">
            <el-statistic
              group-separator=","
              :value="Number(item.value)"
              :title="item.title"
            >
              <template slot="suffix" slot-scope="scope">
                <div style="font-size: 20px;">吨</div>
              </template>
            </el-statistic>
          </el-card>
        </el-col>
      </div> -->
      <el-col :span="6">
        <el-card shadow="never">
          <el-statistic
            group-separator=","
            :value="numLDZS"
            title="联单总数"
          ></el-statistic>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card shadow="never">
          <el-statistic
            group-separator=","
            :value="numYSZL"
            title="运输总量"
          >
            <template slot="suffix">
              <div style="font-size: 20px;">吨</div>
            </template>
          </el-statistic>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card shadow="never">
          <el-statistic
            group-separator=","
            :value="numYSCS"
            title="运输次数"
          ></el-statistic>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card shadow="never">
          <el-statistic
            group-separator=","
            :value="numCZZL"
            title="处置总量"
          >
            <template slot="suffix">
              <div style="font-size: 20px;">吨</div>
            </template>
          </el-statistic>
        </el-card>
      </el-col>
    </el-row> 

    <div style="margin-top: 20px">
      <el-row :gutter="10">
        <el-col :span="12">
          <el-card shadow="never">
            <area-pie-chart></area-pie-chart>
          </el-card>
        </el-col>
        <el-col :span="12">
          <el-card shadow="never">
            <status-bar-chart></status-bar-chart>
          </el-card>
        </el-col>
      </el-row>
    </div>

    <div style="margin-top: 20px">
      <el-row :gutter="10">
        <el-col :span="14">
          <el-card shadow="never">
            <lj-line-chart ></lj-line-chart>
          </el-card>
        </el-col>
        <el-col :span="10">
          <el-card shadow="never">
            <lj-type-pie-chart></lj-type-pie-chart>
          </el-card>
        </el-col>
      </el-row>
    </div>

    <div style="margin-top: 20px">
      <el-row>
        <el-col :span="24">
          <el-card shadow="never">
            <div style="font-weight: bold">施工工地统计</div>
            <div style="margin-top: 10px">
              <el-table
                :data="orderDataList"
                border
                style="width: 100%">
                <el-table-column
                  prop="name"
                  align="center"
                  label="施工工地名称">
                </el-table-column>
                <el-table-column
                  prop="ldNum"
                  align="center"
                  label="联单数量">
                </el-table-column>
                <el-table-column
                  prop="ycTotal"
                  align="center"
                  label="垃圾转运量(吨)">
                </el-table-column>
                <el-table-column
                  prop="ysNum"
                  align="center"
                  label="运输次数">
                </el-table-column>
              </el-table>
              <pagination
                v-show="total>0"
                :total="total"
                :page.sync="queryParams.pageNum"
                :limit.sync="queryParams.pageSize"
                @pagination="getOrderListStatic"
              />
            </div>
          </el-card>
        </el-col>
      </el-row>

    </div>

  </div>
</template>

<script>
import AreaPieChart from "@/views/wasterTran/order/echarts/AreaPieChart.vue";
import StatusBarChart from "@/views/wasterTran/order/echarts/StatusBarChart.vue";
import LjLineChart from "@/views/wasterTran/order/echarts/LjLineChart.vue";
import LjTypePieChart from "@/views/wasterTran/order/echarts/LjTypePieChart.vue";

import { countNumStatic, orderListStatic } from "@/api/wasterTran/static";


export default {
  name: "Order",
  components: {LjLineChart, AreaPieChart, StatusBarChart, LjTypePieChart},
  data() {
    return {
      countNumList: [], // 联单总数,运输总量, 运输次数 ,处置总量
      numLDZS: 0, // 联单总数
      numYSZL: 0, // 运输总量
      numYSCS: 0, // 运输次数
      numCZZL: 0, // 处置总量
      orderDataList: [], // 工地统计
      total: 0,
      queryParams: {
        pageNum: 1, //  当前页
        pageSize: 10, // 每页显示几条
      },
    };
  },
  created() {
    // this.getList();
    this.getCountNumStatic()
    this.getOrderListStatic() // 工地统计
  },
  methods: {
    
    // 联单总数,运输总量, 运输次数 ,处置总量
    getCountNumStatic() {
      console.log('getCountNumStatic')
      let body = {
      }
      countNumStatic(body).then(response => {
        console.log(response)
        this.countNumList = response.data
        for(let i=0; i<this.countNumList.length; i++) {
          console.log(this.countNumList[i].title, this.countNumList[i].title == "联单总数")
          if(this.countNumList[i].title == "联单总数" ){
            this.numLDZS = Number(this.countNumList[i].value)
          }
          if(this.countNumList[i].title == "运输总量" ){
            this.numYSZL = Number(this.countNumList[i].value)
          }
          if(this.countNumList[i].title == "运输次数" ){
            this.numYSCS = Number(this.countNumList[i].value)
          }
          if(this.countNumList[i].title == "处置总量" ){
            this.numCZZL = Number(this.countNumList[i].value)
          }
        }
        console.log(this.numLDZS, this.numYSZL, this.numYSCS, this.numCZZL)
      })
    },
    // 工地统计
    getOrderListStatic() {
      console.log('getOrderListStatic')
      
      orderListStatic(this.queryParams).then(response => {
        console.log(response)
        this.orderDataList = response.rows
        this.total = response.total
      })
    },
  }
};
</script>
